<template>
	<div class="image-list">
		<div class="block">
			<el-image
				:src="require('../../assets/site-photos/1.jpg')"
				:preview-src-list="[require('../../assets/site-photos/1.jpg')]"
			></el-image>
			<h3 class="title">厂区</h3>
		</div>
		<div class="block">
			<el-image
				:src="require('../../assets/site-photos/2.jpg')"
				:preview-src-list="[require('../../assets/site-photos/2.jpg')]"
			></el-image>
			<h3 class="title">监控仓</h3>
		</div>
		<div class="block">
			<el-image
				:src="require('../../assets/site-photos/3.jpg')"
				:preview-src-list="[require('../../assets/site-photos/3.jpg')]"
			></el-image>
			<h3 class="title">直流仓</h3>
		</div>
		<div class="block">
			<el-image
				:src="require('../../assets/site-photos/4.jpg')"
				:preview-src-list="[require('../../assets/site-photos/4.jpg')]"
			></el-image>
			<h3 class="title">交流仓</h3>
		</div>
	</div>
</template>
<script>
export default {
	name: "site-photos",
	computed: {},
	data() {
		return {};
	},
	mounted() {},
	methods: {},
};
</script>

<style lang="scss" scoped>
.image-list {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	width: 100%;
	padding: 30px 140px 0;
	box-sizing: border-box;
	height: 100%;

	.block {
		width: calc(50% - 105px);
		height: 50%;
		padding-bottom: 25px;
		box-sizing: border-box;
		.title {
			color: #ffffff;
			text-align: center;
			line-height: 40px;
		}
		.el-image {
			width: 100%;
			height: calc(100% - 20px);
		}
	}
}
</style>
